<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form
        ref="formRef"
        :model="formState"
        :rules="validatorRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item
          label="成品货号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            type="text"
            name="productCode"
            v-model:value="formState.productCode"
            placeholder="请输入成品货号"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="成品SKU"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            type="text"
            name="productSku"
            v-model:value="formState.productSku"
            placeholder="请输入成品SKU"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="产品类别"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            type="text"
            name="productCategory"
            v-model:value="formState.productCategory"
            placeholder="请输入产品类别"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="目标商场"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            type="text"
            name="targetMarket"
            v-model:value="formState.targetMarket"
            placeholder="请输入目标商场"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="当前余量"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            type="number"
            name="inventory"
            v-model:value="formState.inventory"
            placeholder="请输入当前余量"
          ></a-input>
        </a-form-item>
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            type="text"
            name="remark"
            v-model:value="formState.remark"
            placeholder="请输入备注"
          ></a-input>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  defineComponent,
  onMounted,
  toRaw,
} from "vue";
import { pick } from "lodash-es"; // 确保你已经安装了 lodash-es
import { message } from "ant-design-vue";
import {
  AddProduct,
  EditProduct,
} from "../../wailsjs/go/controller/ProductManagement";

const formRef = ref();
const visible = ref(false);
const formState = reactive({
  productCode: "",
  productSku: "",
  productCategory: "",
  targetMarket: "",
  inventory: "",
  remark: "",
  createBy: "",
  createTime: "",
  updateBy: "",
  updateTime: "",
});
const title = "操作";
const width = 800;
const isAdd = ref(true);
const confirmLoading = ref(false);
const labelCol = {
  xs: { span: 24 },
  sm: { span: 5 },
};

const wrapperCol = {
  xs: { span: 24 },
  sm: { span: 16 },
};

const validatorRules = reactive({
  productCode: { rules: [] },
  productSku: { rules: [] },
  productCategory: { rules: [] },
  targetMarket: { rules: [] },
  inventory: { rules: [] },
  remark: { rules: [] },
  createBy: { rules: [] },
  createTime: { rules: [] },
  updateBy: { rules: [] },
  updateTime: { rules: [] },
});

onMounted(() => {
  nextTick(() => {
    console.log("挂在组件");
    console.log(formRef);
  });
});

// 定义方法
const add = () => {
  edit({});
};

const edit = (record) => {
  if (record && record.productCode) {
    isAdd.value = false;
    formState.id = record.id || 0;
    formState.productCode = record.productCode || "";
    formState.productSku = record.productSku || "";
    formState.productCategory = record.productCategory || "";
    formState.targetMarket = record.targetMarket || "";
    formState.inventory = (record.inventory || "").toString();
    formState.remark = record.remark || "";
    formState.createBy = record.createBy || "";
    formState.createTime = record.createTime || "";
    formState.updateBy = record.updateBy || "";
    formState.updateTime = record.updateTime || "";
  } else {
    isAdd.value = true;
  }
  // formRef.value.resetFields();
  visible.value = true;
};

const close = () => {
  visible.value = false;
  // 触发父组件的 close 事件
  // 假设父组件监听了 "close" 事件
};

const handleOk = () => {
  // 处理确认按钮的逻辑
  console.log("formState :");
  console.log(toRaw(formState));
  if (isAdd.value) {
    AddProduct(toRaw(formState)).then((res) => {
      if (res["code"] == 200) {
        message.success(res["message"]);
      } else {
        message.error(res["message"]);
      }
    });
  } else {
    EditProduct(toRaw(formState)).then((res) => {
      if (res["code"] == 200) {
        message.success(res["message"]);
      } else {
        message.error(res["message"]);
      }
    });
  }
  close();
};

const handleCancel = () => {
  close();
};

const popupCallback = (row) => {
  // formRef.value.setFieldsValue(pick(row));
};

// 导出模板中需要用到的方法和数据
defineExpose({
  popupCallback,
  add,
  edit,
});
</script>
